<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="main_layout::html_header(~{::link}, _)">
	<link rel="stylesheet" th:href="@{/lib/DataTables/1.10.15/datatables.min.css}" />
</head>
 
<body class="hold-transition skin-blue fixed">
<div class="wrapper">

<header class="main-header" th:replace="main_layout::header">
</header>

<aside class="main-sidebar">
	<section class="sidebar" th:replace="main_layout::menu">
	</section>
</aside>

<div class="content-wrapper">
<section class="content-header">
	<h1><a th:href="@{/}">首页</a><small><a th:href="@{/system/dept}">部门管理</a></small></h1>
</section>
	
<section class="content">
<!-- 部门列表 S  -->
<div class="col-lg-6">
	<div class="box box-primary">
		<div class="box-header with-border">
			<h3 class="box-title">部门列表</h3>
			<div class="pull-right box-tools">
				<button type="button" class="btn btn-primary btn-sm" onclick="add_dept()">添加部门</button>
		</div>
		</div>
    	<div class="box-body">
    		<table id="dept_table" class="table table-hover table-bordered">
			    <thead>
			    <tr>
			        <th>部门名称</th>
			        <th>权限</th>
			        <th>操作</th>
			    </tr>
			    </thead>
			</table>
		</div>
	</div><!-- /.box box-primary -->
</div>
<!-- 团队列表  E -->

<!-- 员工列表 S  -->
<div class="col-lg-6">
  <div class="box box-info">
    <div class="box-header with-border">
    	<h3 class="box-title" id="user_title">&nbsp;</h3>
    </div>
				
    <div class="box-body" id="col_table_dev">
      <table class="table table-bordered table-hover" id="user_table">
        <thead>
        <tr>
          <th>用户名</th>
          <th>登录名</th>
          <th>职务</th>
          <th>电话</th>
        </tr>
        <thead>
      </table>
    </div>
  </div><!-- /.box box-info -->
</div><!-- /.col-lg-7 -->
<!-- 员工列表 E -->
</section>
</div>
  
<footer class="main-footer" th:replace="main_layout::footer">
</footer>


<aside class="control-sidebar control-sidebar-light">
    
</aside>

<div class="control-sidebar-bg" ></div>

</div>

<!-- 添加部门对话框 S -->
<div class="modal fade" id="dept_modal" role="dialog">
<div class="modal-dialog">
 <div class="modal-content">
 
<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	<h4 class="modal-title" id="dept_title">添加部门</h4>
</div>

<div class="modal-body">
<div class="row" style="padding: 0px 20px">

<form action="#" class="form-horizontal" id="dept_form">
	<input type="hidden" name="id" id="id" />
	<div class="form-group">
		<label for="describe" class="col-sm-2 control-label">部门名称</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" name="deptName" id="deptName" data-rule-required="true" />
		</div>
	</div>
	<div class="form-group">
		<label for="value" class="col-sm-2 control-label">所属权限</label>
		<div class="col-sm-10">
			<select name="right.id" id="right.id" class="form-control">
				<option value=""> 无权限 </option>
				<option th:each="right : ${rights}" th:value="${right.id}" th:text="${right.name}"></option>
			</select>
		</div>
	</div>
</form>
   
</div><!-- /.row -->
</div><!-- /.modal-body -->

<div class="modal-footer">
    <button type="button" class="btn btn-primary" onclick="$('#dept_form').submit();">保存</button>
	<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>

</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 系统修改对话框 E -->

<script th:src="@{/lib/DataTables/1.10.15/datatables.min.js}"></script>
<script th:src="@{/lib/DataTables/datatables.config.js}"></script>
<script th:src="@{/lib/jquery-validation/1.16.0/jquery.validate.min.js}"></script>
<script th:src="@{/lib/jquery-validation/1.16.0/messages_zh.js}"></script>
<script th:src="@{/lib/moment/2.18.1/moment.min.js}"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
var dept_table, dept_id, user_table, validate;

function add_dept() {
	$("#dept_title").text("添加部门");
	$("#dept_form").initForm(validate);
	$("#dept_modal").modal({backdrop:'static', keyboard: false});
}
function edit_dept(id) {
	$.post("[[@{/system/dept/edit}]]", {id: id}, function(ret){
		if(ret) {
			$("#dept_title").text("修改部门");
			$("#id").val(ret.id);
			$("#deptName").val(ret.deptName);
			$("[name='right.id']").val(ret.right ? ret.right.id : '');
			
			$("#dept_modal").modal({backdrop:'static', keyboard: false});
		}
	}, "json");
}
function del_dept(id, name) {
	$.dialog.confirm("确认删除部门\"" + name + "\"吗？", function(){
		$.post("[[@{/system/dept/del}]]", {id: id}, function(ret){
			if(!ret.success) $.dialog.alert(ret.message);
			dept_table.ajax.reload();
		}, "json");
	})
}

function show_user(id, name) {
	$("#user_title").text("部门: " + name);
	dept_id = id;
	user_table.ajax.reload();
}

$(function(){
	validate = $("#dept_form").validate({
		submitHandler:function(form){
			$.post("[[@{/system/dept/save}]]", $("#dept_form").serializeArray(), function(ret){
				if(ret.success) {
					$("#dept_modal").modal('hide');
				} else {
					$.dialog.alert(ret.message);
				}
				dept_table.ajax.reload();
			}, "json");
		}
	});
	dept_table = $('#dept_table').DataTable({
        select: false,
        ordering: false,
        paging: false,
        ajax: {
            url: "[[@{/system/dept/list}]]",
            type: 'POST',
            dataSrc: ''
        },
        columnDefs: [
            {targets: 2, orderable: false, width: "120px",  className: "align_center", render: function(data, type, full, meta ) {
            	return	"<a href = 'javascript:;' onclick='edit_dept(\"" + data + "\")'>修改</a>" + '&nbsp;&nbsp;' +
    			" <a href = 'javascript:;' onclick='del_dept(" + data + ",\"" + full[0] + "\")'>删除</a>" + '&nbsp;&nbsp;' +
    			" <a href = 'javascript:;' onclick='show_user(" + data + ",\"" + full[0] + "\")'>查看</a>";
            			
            }}
        ]
    });
	
	user_table = $('#user_table').DataTable({
        select: false,
        ordering: false,
        paging: false,
        ajax: {
            url: "[[@{/system/dept/user/list}]]",
            type: 'POST',
            dataSrc: '',
            data: function(d){
				d.id = dept_id;
			}
        },
        columnDefs: [{targets:'_all', width: '25%'}]
	
    });
});
</script>
</body>
</html>
